<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="show = false">改false</button>
        <!-- vue会尽可能的复用能复用的dom元素，实在无法复用就创建新的 -->
        <!-- 如果是同一种类型的标签就可以复用 -->
        <div class="xx" v-if="show">我是div</div>
        <div class="oo" v-else>我是box</div>

        <!-- 
            vue内部怎么知道只要修改class和文字呢？
            所以肯定要用旧的跟新的做对比，找出不同
            专门修改不同的地方就复用了

            就意味着要遍历所有的属性，看有没有不同的
            真实的dom属性特别的多，接近300个，如果你直接遍历，就意味着要遍历300多次
            和比较300多次，比较耗时，再根据仔细观察，虽然300个属性，但是大部分属性是默认值
            比较了也没意义
            所以vue专门弄了一个新的东西，新的东西叫`虚拟dom`，本质上只是一种js对象
            只不过用这种形式记录了原本的那些dom到底有哪些属性不是默认值
         -->
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    show: true
                }
            },
        })
    </script>
</body>
</html>